<template>
    <AntdShowModal :title="`【${role.roleName}-${role.roleKey}】授权用户管理`" :width="900" ref="modalRef">
        <a-row :gutter="20">
            <a-col :span="6">
                <DeptTree @confirm="deptConfirm"></DeptTree>
            </a-col>
            <a-col :span="18">
                <a-row>
                    <a-input-search allow-clear v-model:value="queryParams.searchKey" placeholder="学工号/姓名/手机号模糊"
                        style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="handleQuery()" />
                    <a-button style="margin-bottom: 10px; left:30px; width: 80px;" @click="resetQuery()">
                        <template #icon>
                            <SyncOutlined />
                        </template>重置
                    </a-button>
                </a-row>
                <AntdZh>
                    <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
                        @change="handleTableChange">
                        <template #bodyCell="{ column, record, index }">

                            <template v-if="column.dataIndex === 'dept'">
                                <view v-if="deptStore.deptMap">
                                    {{ deptStore.getDeptName(record.deptId) || null }}
                                </view>

                            </template>
                            <template v-else-if="column.dataIndex === 'status'">
                                <!--执行状态-->
                                <a-tag color="green" v-if="record.status">在职</a-tag>
                                <a-tag color="red" v-else>离职</a-tag>

                            </template>
                            <template v-else-if="column.dataIndex == 'action'">
                                <a-button type="danger" @click="doCancel(record.id)"
                                    v-if="hasUser(record.id)">取消授权</a-button>
                                <a-button type="primary" @click="doGrant(record.id)" v-else>授权</a-button>
                            </template>
                        </template>
                    </a-table>
                </AntdZh>
            </a-col>
        </a-row>
    </AntdShowModal>
</template>
<script setup>
import DeptTree from '@/module/org/components/DeptTree';
import { SyncOutlined } from '@ant-design/icons-vue';
import { columns } from "./index";
import useApp from '@/hooks';
const { $ } = useApp();
import useDeptStore from '@/module/org/store/dept';
const deptStore = useDeptStore();
import { getRoleUsers } from '@/module/system/api/role';
import { queryList } from '@/module/system/api/user';
import { createOne, cancelOne } from '@/module/system/api/grant'
const loading = ref(false)
const userIds = ref([])
const tableData = ref([])
const roleId = ref(null)
const role = ref({})
const modalRef = ref(null)
const total = ref(0)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    deptId: undefined,
    searchKey: undefined
})
const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
const props = defineProps({
    roleId: {
        type: [String, Number]
    }
})
function handleTableChange(page, filters, sorted) {


    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;

    // 状态
    var status = filters.status;
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }
    handleQuery();

}
function doCancel(userId) {
    cancelOne({
        roleId: roleId.value,
        userId: userId
    }).then(res => {
        $.showToast({
            title: '取消成功',
            icon: 'success'
        })
        getUsers()

    })
}
// 授权
function doGrant(userId) {
    createOne({
        roleId: roleId.value,
        userId: userId
    }).then(res => {
        $.showToast({
            title: '授权成功',
            icon: 'success'
        })
        getUsers()

    })
}
// 检查函数
function hasUser(userId) {
    return userIds.value.includes(userId)
}
// 重置
function resetQuery() {
    queryParams.value = {
        pageSize: 10,
        pageNum: 1
    }
    handleQuery();
}
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        console.log(response)
        loading.value = false;
        tableData.value = response.content;
        total.value = response.totalElements;

    })
}
// 部门确认
function deptConfirm(e) {
    queryParams.value.deptId = e
    queryParams.value.pageNum = 1
    handleQuery()
}

function getUsers() {
    // 执行查询
    getRoleUsers(roleId.value).then(res => {
        let arr = res;
        userIds.value = arr.map(ele => {
            return ele.id
        })
    })
}

$.on('role-user-grant', data => {
    role.value = data;
    roleId.value = data.id;
    // 初始化执行
    handleQuery()
    getUsers()
    modalRef.value.openModal();
})
</script>